<template>
  <div>
    <el-card style='margin: 20px 0'>
      <CategorySelect @getCategoryId='getCategoryId' :show='scene != 0'></CategorySelect>
    </el-card>
    <el-card>
      <!-- 三部分切换 -->
      <div v-show='scene == 0'>
        <!-- spu列表 -->
        <el-button type="primary" icon='el-icon-plus' style='margin: 10px 0' :disabled='!category3Id' @click='addSpu'>添加SPU</el-button>
        <el-table border :data='records'>
          <el-table-column type='index' label="序号" width='80' align="center"></el-table-column>
          <el-table-column label="SPU名称" width='150' prop='spuName'></el-table-column>
          <el-table-column label="SPU描述" prop='description'></el-table-column>
          <el-table-column label="操作" width='240'>
            <template v-slot='{row}'>
              <hint-button type="success" icon='el-icon-plus' size='mini' title='添加sku' @click='addSku(row)'></hint-button>
              <hint-button type="warning" icon='el-icon-edit' size='mini' title='修改spu' @click='updateSpu(row)'></hint-button>
              <hint-button type="info" icon='el-icon-info' size='mini' title='查看sku' @click='handle(row)'></hint-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm='deleteSpu(row)'>
                <hint-button type="danger" icon='el-icon-delete' size='mini' slot="reference" ></hint-button>
              </el-popconfirm>
              
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style='text-align: center; margin: 10px 0'
          :total="total"
          :current-page="page" 
          :page-sizes="[3, 5, 8, 10]"
          :page-size="limit"  
          layout=" prev, pager, next, jumper,->,total,sizes"
          @current-change='getSpuList'
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
      <!-- 切换部分 -->
      <SpuForm v-show='scene == 1' @changeScene='changeScene' ref='spu'></SpuForm>
      <SkuForm v-show='scene == 2' @changeScene1='changeScene1' ref='sku'></SkuForm>
    </el-card>
    <!-- sku列表对话框 -->
    <el-dialog :title='`${spu.spuName}列表`' :visible.sync="dialogTableVisible" :before-close='close'>
      <el-table :data='skuList' v-loading='loading'>
        <el-table-column property="skuName" label="名称" width="150"></el-table-column>
        <el-table-column property="price" label="价格" width="200"></el-table-column>
        <el-table-column property="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template v-slot='{row}'>
            <img :src='row.skuDefaultImg' style='width: 100px; height: 100px'>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import SpuForm from './SpuForm'
import SkuForm from './SkuForm'
export default {
  name: 'Spu',
  data () {
    return {
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 控制三级联动是否禁用，props父传子数据，子组件使用, 改为用scene场景不是0判定
      // show: true,
      // spu列表参数
      page: 1,
      limit: 3,
      records: [],//请求回来的spu数据
      total:0,
      // 切换内容表示
      scene: 0,
      // sku对话框隐藏
      dialogTableVisible: false,
      // 保存一下spu
      spu: {},
      // 请求来的SKUList
      skuList: [],
      // 加载loading
      loading: true
    }
  },
  components: {
    SpuForm,
    SkuForm
  },
  methods: {
    // 三级联动自定义事件，把子组件相应的id传递给父组件
    getCategoryId ({categoryId, level}) {
      if (level == 1) {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level == 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        // 代表三级分类有了，可以发请求
        this.category3Id = categoryId
        // 获取spu列表请求
        this.getSpuList ()
      }
    },
    // 获取spu列表请求
    async getSpuList (pages = 1) {
      // 传默认参数 分页器点击当前页获取数据事件
      this.page = pages
      // 三个参数page, limit, category3Id
      const {page, limit, category3Id} = this
      let result = await this.$API.spu.reqSpuList (page, limit, category3Id)
      // console.log(result)
      if (result.code == 200) {
        this.records = result.data.records
        this.total = result.data.total
      }
    },
    // 分页器某一页条数limit变化事件,会注入选择的limit参数
    handleSizeChange (limit) {
      this.limit = limit
      this.getSpuList ()
    },
    // 添加spu回调
    addSpu () {
      this.scene = 1
      // 添加要发2个请求（品牌和销售属性）通知子组件发
      this.$refs.spu.addSpuData (this.category3Id)
    },
    // 点击修改
    updateSpu (row) {
      this.scene = 1
      // 父组件获取子组件的事件并调用
      this.$refs.spu.initSpuData (row)
    },
    // spuForm取消事件自定义回调 
    changeScene ({scene, flag}) {
      this.scene = scene
      // 子组件点击取消的时候回到0场景，或者修改后点击保存的时候回到0，并且要重新获取列表展示数据
      if (flag == '修改') {
        this.getSpuList (this.page)
      } else {
        this.getSpuList ()
      }
    },
    // skuForm 取消事件自定义事件回调
    changeScene1 (scene) {
      this.scene = scene
    },
    // 删除spu回调
    async deleteSpu (row) {
      let result = await this.$API.spu.reqDeleteSpu (row.id)
      if (result.code == 200) {
        this.$message ({type: 'success', message: '删除成功'})
        this.getSpuList (this.records.length>1? this.page: this.page-1)
      }
    },
    // 添加sku
    addSku (row) {
      this.scene = 2
      // 父组件调用skuform方法发请求
      this.$refs.sku.getData (this.category1Id, this.category2Id, row)
    },
    // 展示sku列表对话框
    async handle (spu) {
      this.dialogTableVisible = true
      this.spu = spu
      let result = await this.$API.spu.reqSkuList (spu.id)
      if (result.code == 200) {
        this.skuList = result.data
        this.loading = false
      }
    },
    // 关闭对话框
    close (done) {
      this.loading = true
      this.skuList = []
      done ()
    }
  }
}
</script>

<style>

</style>
